<template>
	<navbar title="登录" :isBack="true"></navbar>
	<view class="content flex-direction-column" :style="{ height: tools.clientTopHight() }">
		<view class="top">
			<view style="margin-bottom: 30rpx;">
				<image src="/static/logo.png"></image>
			</view>
			<text> 闪击门球赛事助手</text>
			<!-- <text>潮物云店铺</text> -->
		</view>
		<view class="middle flex">
			<span></span>
			<text>授权将获取您的公开信息（头像、昵称等）注册登录</text>
		</view>
		<view class="bottom flex-direction-column">
			<view class="btn flex" v-if="!info.show" @click="getUserInfo">
				<!-- <image src="/static/icon/22.png"></image> -->
				<text>授权登录</text>
			</view>
			<button v-if="info.show" class="btn" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">注册登录</button>
			<view class="btn flex" @click="backClick"> 暂不登录 </view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import { getLogin, getSmallMobile, getXcxReg, getInfo } from '@/service/api/user'
	import tools from '@/utils/tools'
	import userPinia from '@/store/user'
	const user = userPinia()

	let info = reactive({
		show: false,
		params: {},
		userInfo: {}
	})

	// 获取用户信息
	const getUserInfo = () => {
		uni.getUserProfile({
			desc: '登录',
			success: (res) => {
				info.userInfo = res.userInfo
				// 获取code
				loginCode()
			}
		})
	}

	// 获取code
	const loginCode = () => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				getLoginApi(res.code)
			}
		})
	}

	// 手机号 授权框
	const getPhoneNumber = (e) => {
		info.params = { ...e.detail, ...info.params }
		// 获取手机号
		getSmallMobileApi()
	}

	// 暂不登录
	const backClick = () => {
		tools.navTo('', 2)
	}

	// 存
	const setStorage = (title : string, userInfo) => {
		tools.showToast(title)
		tools.setStorage<string>('userInfo', userInfo)
		user.$state.userInfo = userInfo
		setTimeout(() => {
			// getPage()
			  // const pages = getCurrentPages()
			// const perPage = pages[pages.length - 2]
			// tools.navTo('/' + perPage.route,3)
			tools.navTo('', 2)

		}, 500)
	}

	// 获取手机号
	const getSmallMobileApi = async () => {
		const { msg } = await getSmallMobile(info.params)
		info.params = { ...msg, ...info.params }
		// 注册
		getXcxRegApi()
	}

	// 登录
	const getLoginApi = async (code : string) => {
		const res : { code : number; msg } = await getLogin({ code })
		// 新用户
		// if (res.code == 1) return setStorage('登录成功', res.msg)
		if (res.code == 1) return tools.setStorage<string>('token', res.msg), getInfoApi('登录成功')
		info.show = true
		info.params = { ...res.msg, ...info.userInfo }
	}

	// 注册
	const getXcxRegApi = async () => {
		const { msg } = await getXcxReg(info.params)
		tools.setStorage<string>('token', msg), getInfoApi('注册成功')
	}

	// 获取个人信息
	const getInfoApi = async (title) => {
		const { code, msg } = await getInfo()
		if (code == 1) return setStorage(title, JSON.stringify(msg))
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 60rpx;
		justify-content: center;

		.top {
			height: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;

			image {
				width: 140rpx;
				height: 133rpx;
				// margin-right: 30rpx;
			}

			text {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		.middle {
			margin-top: 190rpx;
			align-items: center;

			span {
				width: 8rpx;
				height: 8rpx;
				background-color: #000;
				border-radius: 50%;
				margin-right: 10rpx;
				border: none;
			}

			text {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.bottom {
			.btn {
				width: 612rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
				border-radius: 100rpx;
				justify-content: center;
				align-items: center;
				margin-top: 80rpx;

				&:nth-child(1) {
					color: #fff;
					background: #000;

					image {
						width: 50rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}
				}

				&:nth-child(2) {
					color: #888888;
					border: 1px solid #dddddd;
				}
			}
		}
	}
</style>